<template>
    <div class="user_box">
        <H1>用户个人信息页 </H1>
         <!-- 用户个人信息 -->
         <div class="info_u">
            <div class="user_info" v-for='user in Userinfo' :key='user.Uid' v-if='(user.Uid == uid)'>
                <div class="name">
                    <!-- <img class="user_img_p" src="../assets/images/1.png" alt="图片"> -->
                    <img :src="require('../static/user/'+user.Upicture)" alt="图片" class="img_touxiang">
                </div>
                <div class="user_info_nick ">
                    <span class="fo_in">昵称：{{user.NikeName}}</span>
                </div>
                <div class="user_in_fo">
                    <span class="fo_in">账号：{{user.UserAccount}}</span>
                </div>
                <div class="user_in_fo">
                    <span class="fo_in">年龄：{{user.UserAge}}</span>
                </div>
                <div class="user_in_up updat">
                    <router-link class="up_data" to="/updinfo">修改用户信息</router-link>
                </div>
            </div>

        </div>

        <!-- 发表帖子模块 -->
        <div class="log_user">
            <ul class="com" v-for='comm in Comment' :key='comm.Cid' v-if='(uid == comm.User_id)'>
                <li class="comment">
                    <div class="comm_cont">{{comm.ComContent}}</div>
                    <div class="comm_time">{{comm.Comtime}}</div>
                </li>
            </ul>
            <div class="float-button">
                <a href="javascript:window.scrollTo(0,0)">UP</a>
            </div>
        </div>

       
    </div>
</template>
<script>
    import axios from "axios"


    export default {
        data() {
            uid: (localStorage.getItem("userId"))
            return {
                Userinfo: [],
                NikeName: '',
                UserAccount: '',
                // UserPsw:'',
                UserAge: '',
                Comment: [],
                ComContent: '',
                Comtime: '',
                //用户ID
                uid: localStorage.getItem("userId")
            }
        },
        // (uid !=null)?false:true
        // (uid==null)?false:true
        mounted() {
            console.log('UID:', this.uid);
            this.judge();
            this.getList();
            console.log(typeof this.uid);
        },
        methods: {
            //获取当前用户信息
            getList() {
                axios.get("http://localhost:3000/api/comment")
                    .then(res => {
                        this.Comment = res.data.reverse();
                        console.log(this.Comment);
                    }),
                    axios.get("http://localhost:3000/api/userinfo")
                        .then(res => {
                            console.log(res.data);
                            this.Userinfo = res.data;
                            console.log(this.Userinfo);
                        })
            },
            judge() {
                if (!this.uid) {
                    this.$message({
                        type: 'error',
                        message: '请先登录'
                    })
                    this.$router.push({ path: '/mylogin' });
                }
            }
        }

    }
</script>
<style scoped>
    /* 大盒子 */
    .user_box {
        width: 80%;
        height: 100rem;
        margin: 0rem auto;
        background-color: #fff;
        /* position: fixed;flex-direction: row; */
    }

    h1 {
        margin-left: 30%;
    }

    .log_user {
        position: relative;
        width: 50%;
        height: 90rem;
        margin: 0rem 3% 0rem 4%;
        float: left;
    }

    ul {
        list-style-type: decimal;
    }

    li {
        width: 90%;
        height: 10em;
        background-color: white;
        list-style: none;
        border-radius: 1rem;
        border: 0.3rem dashed rgb(251, 244, 121);
        background-image: url('../assets/images/13.png');
        background-size: 100% 240%;
        overflow-y: scroll;
    }

    ::-webkit-scrollbar {
        display: none;
    }



    /* .literal {
        margin-left: 24%;
        justify-content: center;
        width: 10em;
        font-size: 1em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    } */

    /* li:hover {
        text-overflow: inherit;
        overflow: visible;
    } */




    .comm_cont {
        margin-left: 5%;
        margin-top: 2%;
        /* overflow: scroll; */
    }

    .comm_time {
        margin-left: 34%;
        margin-top: 10%;
    }

    .name {
        width: 100%;
        height: 14rem;
    }

    .info_u {
        width: 40%;
        height: 30rem;
        margin: 0rem auto;
        background-color: pink;
        display: inline-block;
    }

    .img_touxiang {
        width: 50%;
        height: 100%;
        margin-left: 25%;
        border-radius: 50%;
    }

    .user_info_nick {
        width: 90%;
        height: 2rem;
        border-radius: 10px;
        background-color: aliceblue;
        margin: 5% 5% 3% 5%;
    }

    .user_in_fo {
        width: 90%;
        height: 2rem;
        border-radius: 10px;
        background-color: aliceblue;
        margin: 0 5% 3% 5%;
    }

    .fo_in {
        margin: 0 5%;
        width: 14%;
        border: none;
        margin-top: 5px;
    }

    .user_in_up {
        width: 90%;
        height: 2rem;
        background-color: rgb(248, 255, 240);
        margin: 8% 5% 3% 5%;
    }

    .user_in_up:hover {
        background-color: rgb(233, 175, 99);
    }

    .up_data {
        text-align: center;
        width: 40%;
        height: 2rem;
        margin-left: 40%;
        border: none;
        text-decoration: none;
        line-height: 200%;
    }

    .float-button {
        position: fixed;
        /* height: 10%; */
        width: 5%;
        bottom: 0px;
        right: 0px;
        border-radius: 50px;
        line-height: 450%;
        text-align: center;
        background: #f7f31045;
        z-index: 1;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    @media screen and (max-width:768px) {

        /* 手机屏幕 */
        .float-button {
            zoom: 0.8;

        }
        .user_box {
        width: 100%;
    }
    .user_box{
        display: flex;
        flex-direction: column;
    }
    .info_u {
        width: 100%;
        height: 30rem;
        margin: 0rem auto;
        background-color: pink;
        display: inline-block;
    }
    .log_user {
        position: relative;
        width: 100%;
        height: 90rem;
        margin: 0rem;
        float: none;
    }
    }

    @media screen and (max-width:992px) and (min-width:768px) {

        /* 平板 */
        .float-button {
            zoom: 0.8;

        }
        .user_box {
        width: 100%;
        }
    }
</style>